<template>
  <div class="wrap">
    <div class="headtit">
      <div class="btn"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left.6f6409e"></use></svg></div>
      <h1>订单</h1>
    </div>
    <div class="content">
      <img src="https://fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif" alt="">
      <p>登录后查看外卖订单</p>
      <button>立即登录</button>
    </div>
    <div class="foot">
      <div class="tab">
        <router-link to="/">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index-regular.b245d60"></use></svg>
          <span>外卖</span>
        </router-link>
        <router-link to="/find">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover-regular.8ef537f"></use></svg>
          <span>发现</span>
        </router-link>
        <router-link to="/order">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order.070ae2a"></use></svg>
          <span class="on">订单</span>
        </router-link>
        <router-link to="/profile">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile-regular.c151d62"></use></svg>
          <span>我的</span>
        </router-link>
      </div> 
    </div>
  </div>
</template>

<script>
  export default {
    name:'login',
    data () {
      return{

      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap{width: 100%; background:#f5f5f5;}
.headtit{height: .88rem; background-image: linear-gradient(90deg,#0af,#0085ff); position: fixed; top:0; width: 100%; z-index: 1000; display: flex;text-align: center; line-height: .88rem; justify-content: center;}
.headtit .btn{height: .88rem; width: .88rem; display: flex; align-items: center; justify-content: center; position: absolute; left:0; top:0;}
.headtit svg{height: .44rem; width: .44rem;}
.headtit h1{color: #fff; font-size: .35rem;}

.content{margin-top:2.88rem; display: flex; align-items: center; flex-direction:column;}
.content img{height: 4rem; width: 4rem;}
.content p{margin: .25rem 0 .2rem 0; font-size: .34rem; color: #6a6a6a;}
.content button{width:2.4rem; height: .78rem; border:0; background:#56d176; border-radius: .05rem; color: #fff; font-size: .25rem;}

.foot{position: fixed; bottom:0; left: 0; width: 100%; border-top: 1px solid #ccc; background: #fff; z-index: 1000;}
.tab{ display: flex; justify-content: space-between; height: 1rem; align-items:center; padding-top: .09rem;}
.tab a{display: flex; font-size: .22rem; flex-direction: column; align-items: center; width: 25%; color: #666;}
.tab a span{line-height: 1.4; display: block;}
.tab svg{width: .4rem; height: .4rem; margin-bottom: .03rem;}
.foot .on{color: #0089dc;}
</style>
